<template>
  <div class="login">
    <!-- 卡片 -->
    <el-card class="box-card">
      <h1 style="margin: 0 0 14px 10px">demo222系统</h1>
      <!-- 登录 or 注册 -->
      <el-radio-group v-model="state.labelPosition" class="radioGroup" size="small">
        <el-radio-button label="login">登录</el-radio-button>
        <el-radio-button label="signIn">注册</el-radio-button>
      </el-radio-group>
      <!-- user输入表单 -->
      <el-form label-position="right" label-width="80px" :model="state.user">
        <el-form-item
            label="用户名"
            prop="name"
            :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' } ]">
          <el-input v-model="state.user.name"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
            :rules="[ { required: true, message: '请输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="state.user.password" show-password></el-input>
        </el-form-item>
        <el-form-item
            v-if="state.labelPosition==='signIn'"
            label="确认密码"
            prop="checkPassword"
            :rules="[ { required: true, message: '请输入再次输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="state.user.checkPassword" show-password></el-input>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="button">
          <el-button v-if="state.labelPosition==='login'" type="warning" @click="login"
                     :disabled="state.user.name===''||state.user.password===''" round>登录
          </el-button>
          <el-button v-if="state.labelPosition==='signIn'" type="warning" @click="signIn"
                     :disabled="state.user.name===''||state.user.password===''||state.user.checkPassword===''" round>注册
          </el-button>
          <el-button @click="resetForm" round>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {reactive, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus'

// 定义响应式状态
const state = reactive({
  labelPosition: 'login',  // 开始先定位到登录
  user: {
    name: '',
    password: '',
    checkPassword: '',
  }
});

const router = useRouter();

// 获取cookie
function getCookie() {
  if (document.cookie.length > 0) {
    let arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
    for (let i = 0; i < arr.length; i++) {
      let arr2 = arr[i].split("="); // 再次切割
      // 判断查找相对应的值
      if (arr2[0].trim() === "account") {
        state.user.name = arr2[1]; // 保存到保存数据的地方
      } else if (arr2[0].trim() === "password") {
        state.user.password = arr2[1];
      }
    }
  }
}

// 设置cookie，储存账户和密码
function setCookie(c_name: string, c_pwd: string, exdays: number) {
  let exdate = new Date(); // 获取时间
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
  // 字符串拼接cookie
  document.cookie = "account=" + encodeURIComponent(c_name) + ";path=/;expires=" + exdate.toString();
  document.cookie = "password=" + encodeURIComponent(c_pwd) + ";path=/;expires=" + exdate.toString()
}

// 登录
function login() {
  router.push("/");
  setCookie(state.user.name, state.user.password, 7);  // 保存用户名密码到cookie中7天
}

// 注册
function signIn() {
  if (state.user.checkPassword !== state.user.password) {
    ElMessage.error("两次输入的密码不一致!");
  }
}

// 重置表单
function resetForm() {
  state.user.name = "";
  state.user.password = "";
  state.user.checkPassword = "";
}

// 在组件挂载时调用getCookie
onMounted(() => {
  getCookie();
});

</script>

<style>
@import "../assets/css/Login.css";
</style>